<template>
    <div class="common-layout">
        <el-container>
            <el-header style="height:auto;">
                <BlogsHead :ChangeUrl="ChangeUrl"></BlogsHead>
            </el-header>

            <el-container style="background-color: #ecf0f3; height: auto;">
                <el-col :span="3">
                    <el-aside style="width: auto;height: auto">
                        <BlogsNav :data="changeCardVsiual" :ChangeUrl="ChangeUrl"></BlogsNav>
                    </el-aside>
                </el-col>

                <el-col :span="17">
                    <el-main>
                        <BlogsList :data="data" :ChangeCount="ChangeTotalCount" />
                        <div class="example-pagination-block"
                            style="display: flex; justify-content: center;align-items: center;">
                            <!-- <div class="example-demonstration">When you have more than 7 pages</div> -->
                            <el-pagination background layout="prev, pager, next" :total="totalCount"
                                @current-change="handleCurrentChange" />
                        </div>
                    </el-main>
                </el-col>

                <el-col :span="4">
                    <el-main>
                        <el-text class="mx-1">点赞排行</el-text>
                        <br>
                        <el-space wrap :fill=true direction="vertical" style="width:auto">
                            <RouterLink v-for="(item, index) in likeSort" :key="item.id" :label="item.blogName"
                                :value="item" :to="{ name: 'blogView', query: { id: item.id } }">
                                {{ index + 1 }} {{
                                    item.blogName
                                }}</RouterLink>
                        </el-space>
                        <br>
                        <el-text class="mx-1">收藏排行</el-text>
                        <br>
                        <el-space wrap :fill=true direction="vertical" style="width:auto">
                            <RouterLink v-for="(item, index) in starSort" :key="item.id" :label="item.blogName"
                                :value="item" :to="{ name: 'blogView', query: { id: item.id } }">
                                {{ index + 1 }} {{
                                    item.blogName
                                }}</RouterLink>
                        </el-space>
                        <br>
                        <el-text class="mx-1">阅读排行</el-text>
                        <br>
                        <el-space wrap :fill=true direction="vertical" style="width:auto">
                            <RouterLink v-for="(item, index) in viewSort" :key="item.id" :label="item.blogName"
                                :value="item" :to="{ name: 'blogView', query: { id: item.id } }">
                                {{ index + 1 }} {{
                                    item.blogName
                                }}</RouterLink>
                        </el-space>
                    </el-main>
                </el-col>
            </el-container>
        </el-container>
    </div>

    <!-- <el-button @click="Print">test</el-button> -->
</template>

<script setup>
import BlogsHead from "../components/Blogs/BlogsHead.vue"
import BlogsNav from "../components/Blogs/BlogsNav.vue"
import BlogsInfo from "../components/Blogs/BlogsInfo.vue"
import BlogsList from "@/components/Blogs/BlogsList.vue"
import { onMounted, ref, watch } from 'vue';
import axios from 'axios'

const cardVsiual = ref(false);

const changeCardVsiual = function () {
    cardVsiual.value = !cardVsiual.value;
}

const totalCount = ref(100);

const likeSort = ref([]);
const starSort = ref([]);
const viewSort = ref([]);

function handleCurrentChange(newPage) {
    data.value.need_pageNumber = newPage;
    console.log(data.value.need_pageNumber);
};

const props = defineProps({
    url: {
        type: String,
        default: '/api/blog/getcache'  // 设置默认值
    },
    keyword: {
        type: String,
        default: ''  // 设置默认值
    },
});

function Print() {
    console.log(props);
}

const data = ref({
    url: props.url,
    need_pageNumber: 1,
    keyword: props.keyword,
    collection_id: 0,
})

function ChangeUrl(newUrl, newCollection_id = 0) {
    data.value.url = newUrl;
    data.value.collection_id = newCollection_id;
    console.log(data.value);
}

function ChangeTotalCount(newCount) {
    totalCount.value = newCount;
}

function GetSort() {
    axios
        .post('/api/blog/getBlogSort', {
        })
        .then(response => {
            console.log(response);
            likeSort.value = response.data.data.maxLikeBlog;
            starSort.value = response.data.data.maxStarBlog;
            viewSort.value = response.data.data.maxViewBlog;
        })
        .catch(function (error) {
            console.error(error);
        });
}

onMounted(() => {
    // console.log(props);
    // console.log(data.ur);
    GetSort();
})
</script>

<style scoped>
a {
    text-decoration: none;
}
</style>